import React from 'react'
import { Row, Col, Card } from 'antd'
import axios from 'axios'
import {
    LineChart,
    Line,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip,
    Legend,
} from 'recharts'
import './style.css'
import api from "../../api/api";

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dayCount: 0,//今日入住
            monthCount: 0,//本月入住
            dayMoney: 0,//日销售额
            monthMoney: 0,//月销售额


            countData: [],//访问人数统计
            moneyData: [],//放行条人数统计
            cardWidth: 0
        };
    }
    componentDidMount() {
        window.addEventListener('resize', this.handleWidth)
        this.handleWidth()
        this.getNum();//获取人数金额统计
        this.getLineData();//获取折线图数据

    }
    componentWillUnmount() {
        window.removeEventListener('resize', this.handleWidth)
    }
    handleWidth = () => {
       let cardWidth = document.getElementById("cardDom").offsetWidth
        this.setState({
            cardWidth: cardWidth - 100
        })
    }
    getNum() {
        let that = this;
        axios.post(api.api_URL + "/console/checkinForDayAndMonth" , {}, {
            headers: {
                "Content-Type": api.ContentType
            }
        }).then(function (res) {
            console.info(res.data.object)
            if (res.data.errorCode != 1) {
                return;
            }
            let content = res.data.object;
            that.setState({
                dayMoney: content.dayMoney,
                monthMoney: content.monthMoney,
                dayCount: content.dayCount,
                monthCount: content.monthCount,

            })
        }).catch(function (err) {
            console.log(err);
        });

    }


    getLineData() {
        let that = this;
        axios.post(api.api_URL + "/console/checkinChart", {}, {
            headers: {
                "Content-Type": api.ContentType
            }
        }).then(function (res) {
            console.log(res)

            let checkinCount = res.data.objectMap.chartCount;
            let checkinMoney = res.data.objectMap.chartMoney;
            that.setState({
                countData: checkinCount,
                moneyData: checkinMoney
            });

        }).catch(function (err) {
            console.log(err);
        });

    }

    render() {
        return (
            <div>
                <Row gutter={30} className="cardRow">
                    <Col span={6}>
                        <Card title="今日入住" bordered={false}>
                            <div className="cardContent">
                                <span className="cardText">{this.state.dayCount}</span>
                                <span>人</span>
                            </div>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="本月入住" bordered={false}>
                            <div className="cardContent">
                                <span className="cardText">{this.state.monthCount}</span>
                                <span>人</span>
                            </div>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="日销售额" bordered={false}>
                            <div className="cardContent">
                                <span className="cardText">{this.state.dayMoney}</span>
                                <span>元</span>
                            </div>
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card title="月销售额" bordered={false}>
                            <div className="cardContent">
                                <span className="cardText">{this.state.monthMoney}</span>
                                <span>元</span>
                            </div>
                        </Card>
                    </Col>
                </Row>
                <Row className="marginTopRow">
                    <Col span={24}>
                        <Card title="入住人数统计" bordered={false} id="cardDom">
                            <LineChart width={this.state.cardWidth} height={250} data={this.state.countData}>
                                <CartesianGrid strokeDasharray="3 3" />
                                <XAxis dataKey="time" />
                                <YAxis type="number" domain={[0, dataMax => (Math.max(...this.state.countData.map(x => x.checkinData)) + 5)]} />
                                <Tooltip />
                                <Legend verticalAlign="top" height={36} />
                                <Line type="monotone" dataKey="checkinData" stroke="#8884d8" name={"实际入住人数"} />
                                {/*<Line type="monotone" dataKey="checkinData"  stroke="#82ca9d" name={"预计入住人数"} />*/}
                            </LineChart>
                        </Card>
                    </Col>
                    <Col span={24}>
                        <Card title="销售额统计" bordered={false}>
                            <LineChart width={this.state.cardWidth} height={250} data={this.state.moneyData}>
                                <XAxis dataKey="time" />
                                <YAxis type="number" domain={[0, dataMax => (Math.max(...this.state.moneyData.map(x => x.checkinData)) + 5)]} />
                                <CartesianGrid strokeDasharray="3 3" />
                                <Tooltip />
                                <Legend verticalAlign="top" height={36} />
                                <Line type="monotone" dataKey="checkinData" stroke="#8884d8" name={"销售额"} />
                                {/*<Line type="monotone" dataKey="checkinData" stroke="#82ca9d" name={"到访人数"} />*/}
                            </LineChart>
                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default Home
